import { reactive, ref } from "vue";
import { defineStore } from "pinia";
import { ClockInUserType } from "@/types/clockInUser";

export const useClockInUserStore = defineStore("useClockInUserStore", () => {
  // 模拟后端数据
  const _userList: ClockInUserType[] = reactive([
    {
      id: 1,
      portrait: "/public/images/1.png",
      name: "黄客老姚",
      time: "7:12",
    },
    {
      id: 2,
      portrait: "/public/images/2.png",
      name: "黄客涛子",
      time: "7:13",
    },
    {
      id: 3,
      portrait: "/public/images/3.png",
      name: "黄客老王",
      time: "7:13",
    },
    {
      id: 4,
      portrait: "/public/images/4.png",
      name: "张飞",
      time: "7:14",
    },
    {
      id: 5,
      portrait: "/public/images/5.png",
      name: "张三",
      time: "7:15",
    },
    {
      id: 6,
      portrait: "/public/images/6.png",
      name: "李四",
      time: "7:15",
    },
    {
      id: 7,
      portrait: "/public/images/7.png",
      name: "王五",
      time: "7:22",
    },
    {
      id: 8,
      portrait: "/public/images/8.png",
      name: "老六",
      time: "7:22",
    },
    {
      id: 9,
      portrait: "/public/images/9.png",
      name: "黄客",
      time: "7:22",
    },
    {
      id: 10,
      portrait: "/public/images/10.png",
      name: "黄客",
      time: "7:32",
    },
    {
      id: 11,
      portrait: "/public/images/1.png",
      name: "黄客老姚",
      time: "7:32",
    },
    {
      id: 12,
      portrait: "/public/images/2.png",
      name: "黄客涛子",
      time: "7:42",
    },
    {
      id: 13,
      portrait: "/public/images/3.png",
      name: "黄客老王",
      time: "7:42",
    },
    {
      id: 14,
      portrait: "/public/images/4.png",
      name: "张飞",
      time: "7:42",
    },
    {
      id: 15,
      portrait: "/public/images/5.png",
      name: "张三",
      time: "7:52",
    },
    {
      id: 16,
      portrait: "/public/images/6.png",
      name: "李四",
      time: "7:52",
    },
    {
      id: 17,
      portrait: "/public/images/7.png",
      name: "王五",
      time: "7:52",
    },
    {
      id: 18,
      portrait: "/public/images/8.png",
      name: "老六",
      time: "7:55",
    },
    {
      id: 19,
      portrait: "/public/images/9.png",
      name: "黄客",
      time: "7:55",
    },
    {
      id: 20,
      portrait: "/public/images/10.png",
      name: "黄客",
      time: "7:12",
    },
  ]);

  // 前端数据
  const userList = ref<ClockInUserType[]>([]);

  // 模拟异步请求
  const getUserlList = (page: number, size: number) => {
    return new Promise<{
      data: ClockInUserType[];
      page: number;
      total: number;
      hasMore: boolean;
    }>((resolve) => {
      setTimeout(() => {
        const data = _userList.slice((page - 1) * size, page * size);
        userList.value = [...userList.value, ...data];
        resolve({
          data,
          page,
          total: _userList.length,
          hasMore: page * size < _userList.length,
        });
      }, 100);
    });
  };

  return { userList, getUserlList };
});
